<template>
  <div class="app-container loginpassword">
    <van-nav-bar title="更改登录密码"  left-arrow @click-left="$router.back()" />
    <br />
    <van-form @submit="onSubmit">
      <h4>手机号</h4>
      <van-field
        v-model="userEmail"
        name="email"
        readonly
        placeholder="请填写手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <h4>验证码</h4>
      <van-field
        v-model="code"
        name="code"
        type="digit"
        placeholder="请填写验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
        <template #button>
          <van-button @click="onGetVerifyCode" :disabled="codeGetDisable" :loading="codeGetLoading" class="empty-background text-color-light" size="small" type="success" >
            {{ getCodeShow }}
          </van-button>
        </template>
      </van-field>
      <h4>新密码</h4>
      <van-field
        v-model="password"
        type="password"
        name="password"
        placeholder="请填写密码,至少8位数字和大小写字母"
        :rules="[{ required: true, message: '请填写密码,至少8位数字和大小写字母' }]"
      />
      <h4>确认密码</h4>
      <van-field
        v-model="password2"
        type="password"
        name="password2"
        placeholder="请再次填写密码"
        :rules="[{ required: true, message: '请再次填写密码' }]"
      />
      <div  class="space-top-huge">
        <van-button  block type="primary" :loading="loading"  native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getEmailCode } from '@/api/login'
import { showToast, showSuccessToast } from 'vant'
import { mapState } from 'pinia'
import { useUserStore } from '@/store/user'
import { changePassword }  from '@/api/user'

export default {
  name: 'ChangeLoginPassword',
  data() {
    return {
      email: '',
      password: '',
      password2: '',
      code: '',
      loading: false,
      codeGetLoading: false,
      codeGetDisable: false,
      countDown: 60,
      getCodeShow: '获取验证码'
    }
  },
  created() {
    
  },
  methods: {
    onGetVerifyCode() {
      if(this.codeGetLoading) {
        return
      }
      this.codeGetLoading = true
      const that = this
      let countDown = () => {
        that.countDown -= 1
        if(that.countDown > 0) {
          that.$nextTick(() => {
            that.getCodeShow = that.countDown
          })
          setTimeout(countDown, 1000)
        } else {
          this.codeGetDisable = false
          that.$nextTick(() => {
          that.getCodeShow = '获取验证码'
        })
        }
      }
      getEmailCode(this.userEmail, 'setpassword').then(() => {
        this.codeGetLoading = false
        this.codeGetDisable = true
        this.countDown = 61
        countDown()
      }).catch((err) => {
        showToast(err)
        this.codeGetLoading = false
      })
    },
    onSubmit() {
      if(!this.code) {
        showToast('请填写验证码')
        return
      }
      if(!this.password) {
        showToast('请填写密码,至少8位数字和大小写字母')
        return
      }
      if(this.password != this.password2) {
        showToast('两次密码输入不一致')
        return
      }
      this.loading = true
      changePassword({ code: this.code, password: this.password, type: 'login' }).then(() => {
        this.loading = false
        showSuccessToast('操作成功')
        this.$router.back()
      }).catch((err) => {
        showToast(err)
        this.loading = false
      })
    }
  },
  computed:{
    ...mapState(useUserStore, ['ID', 'userEmail']),
  }
  
}
</script>